<template>
	<view>
		<view class="relative tabBox">
			<view class="flex relative" style="z-index: 10;">
				<view @click="changeTab(item,i)" :class="currentTab==i?'bold':''" class="w50 t-center font16 line36"
					v-for="(item,i) in tab" :key="i">{{item.name}}</view>
			</view>
			<image class="w100 hAll imgBg" v-if="currentTab==0" :src="resources.pj1" mode=""></image>
			<image class="w100 hAll imgBg" v-else :src="resources.pj2" mode=""></image>
		</view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="110">
			<view class="pB15 mL15 mR15">
				<block v-if="currentTab==0">
					<view class="jobCard" v-for="(item,i) in list" :key="item.id" >
						<view class="flex alg-center">
							<u-image :width="48" :height="48" v-if="item.comOrUserProfile" class="imgW48"
								:src="xf.getImgUrl(item.comOrUserProfile)" mode=""></u-image>
							<image v-else class="imgW48" :src="resources.defaultHeader" mode=""></image>
							<view class="mL5 font15">{{item.comOrUserName}}</view>
						</view>
						<view class="flex alg-center mT10 jst-between">
							<view class="flex alg-center ">
								<text class="font12 u-8bd mR5">好评度</text>
								<u-rate :active-color="'#FF9C00'" :inactive-color="'#e7e7e7'"  :size="24" :count="5" v-model="item.evaluationScore" :allowHalf="true"></u-rate>
								<text class="mL5 u-org">{{item.evaluationScore}}</text>
							</view>
							<view class="font12 u-9">{{item.evaluationTime}}</view>
						</view>
						<view class="flex alg-center flex-wrap">
							<view class="jobTime" v-for="(v,i) in xf.getArr(item.evaluationCommonSentencesText)">{{v}}</view>
							
						</view>
						<view class="flex  flex-wrap " v-if="item?.evaluationImage">
							<u-image @click="xf.previewImg([xf.getImgUrl(item)])" :width="160" :height="160" :borderRadius="20"  class="companyPic" v-for="(item,i) in xf.getArr(item?.evaluationImage)"
								:src="xf.getImgUrl(item)" mode=""></u-image>
						</view>
						<view class="font13 line24 mT10">
							{{item.evaluationConent}}
						</view>
					

					</view>
				</block>
				<block v-else>
					<view class="jobCard" v-for="(item,i) in list" :key="item.id">
						<view class="flex alg-center">
							<u-image v-if="item.comOrUserProfile" :height="48" :width="48" :src="xf.getImgUrl(item.comOrUserProfile)" mode=""></u-image>
							<image v-else class="imgW48" :src="resources.defaultHeader" mode=""></image>
							<view class="mL5 font15" v-if="item.izAnonymous!=1">{{item.comOrUserName}}</view>
							<view class="mL5 font15" v-else>匿名</view>
						</view>
						<view class="flex alg-center mT10 jst-between">
							<view class="flex alg-center ">
								<text class="font12 u-8bd mR5">好评度</text>
								<u-rate :active-color="'#FF9C00'" :inactive-color="'#e7e7e7'"  :size="24" :count="5" v-model="item.evaluationScore" :allowHalf="true"></u-rate>
								<text class="mL5 u-org">{{item.evaluationScore}}</text>
							</view>
							<view class="font12 u-9">{{item.evaluationTime}}</view>
						</view>
						<view class="flex alg-center flex-wrap">
							<view class="jobTime" v-for="(v,i) in xf.getArr(item.evaluationCommonSentencesText)">{{v}}</view>
							
						</view>
						<view class="flex  flex-wrap " v-if="item?.evaluationImage">
							<u-image @click="xf.previewImg([xf.getImgUrl(item)])" :width="160" :height="160" :borderRadius="20"  class="companyPic" v-for="(item,i) in xf.getArr(item?.evaluationImage)"
								:src="xf.getImgUrl(item)" mode=""></u-image>
						</view>
						<view class="font13 line24 mT10 ">
							{{item.evaluationConent}}
						</view>
						
						
					</view>

				</block>
			</view>
		</mescroll-uni>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		myCommentLis,
		commentMyLis
	} from '@/api/userInterface/user.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tab: [{
						name: '我的评价'
					},
					{
						name: '评价我的'
					},
				],
				downOption: {
					use: true,
					auto: false
				},
				query: {
					pageSize: 10,
					pageNo: 1
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				currentTab: 0


			};
		},
		onShow(e) {

		},
		methods: {
			changeTab(v, i) {
				this.currentTab = i;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			jumpJobDetail(item) {
				uni.navigateTo({
					url: `/pages/userPage/subpackge/oddJob/jobDetail/jobDetail?id=${item.id}`,
				})

			},
			async upCallback(page) {

				if (page.num == 1) this.list = [];
				this.query.pageNo = page.num
				let func = this.currentTab == 0 ? myCommentLis : commentMyLis
				func(this.query).then(res => {
					let list = res.result?res.result?.records:[];
					this.list = this.list.concat(list);
					let num=res.result!=null?res.result.records.length:0;
					this.mescroll.endSuccess(num);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})

			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background: linear-gradient(0deg, #F7F9FD, #E1EEFF);
	}
</style>
<style scoped lang="scss">
	.companyPic{
		margin-top: 20rpx;
		margin-right: 10rpx;
		&:nth-child(3n){
			margin-right: 0;
		}
	}
	.tabBox {
		height: 194rpx;

		.imgBg {
			width: 100%;
			left: 0;
			top: 0;
			height: 194rpx;
			position: absolute;
			z-index: 0;
		}
	}

	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.jobName {
			// max-width:200rpx;
		}

		.jobLeft {
			width: 70%;
		}

		.canselFavorBtn {
			padding: 0 30rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			margin-right: 20rpx;
			border-radius: 16rpx;
			border: 2rpx solid #F3F3F3;
		}

		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
		}

		.jobTag {
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 80rpx;
			height: 80rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>